<template>
  <!-- 服务商管理-服务渠道列表 -->
  <div class="services-channels">
    <div class="serch-ground">
      <SearchForm ref="SearchForm" :searchList="searchList" @searchSubmit="searchSubmit"></SearchForm>
    </div>
    <div class="margin-bottom">
      <el-button icon="el-icon-add" @click="searchAdd" type="primary">新增</el-button>
    </div>
    <IesTable
      :tableData="tableData"
      :theadData="theadData"
      :paginationOptions="paginationOptions"
      :editPassOperate="true"
      @tableSizeChange="tableSizeChange"
      @tableCurrentChange="tableCurrentChange"
      @tableSelectionChange="tableSelectionChange"
      @edit="edit"
      @del="del"
      @change="change"
      :loading="iesTableLoading"
    />
    <IesDialog
      :title="mapState.channelsEnterType==='add'?$t('i18n_servicer')+$t('i18n_channel')+$t('i18n_add'):$t('i18n_servicer')+$t('i18n_channel')+$t('i18n_edit')"
      width="1100px"
      :iesDialogFlag.sync="dialogVisible"
      custom-class="services-channels"
      buttonShow="false"
      scrollPanel="false"
    >
      <el-tabs v-model="activeName" @tab-click="tabChange">
        <el-tab-pane :label="tabsLabel.base" name="base">
          <div class="dialog-tabs-content">
            <vue-scroll :ops="scrollPanel">
              <Base v-if="activeName==='base'" ref="base" />
            </vue-scroll>
          </div>
        </el-tab-pane>
        <el-tab-pane
          :disabled="mapState.channelsEnterType==='add'"
          :label="tabsLabel.weightRule"
          name="weightRule"
        >
          <div class="dialog-tabs-content">
            <vue-scroll :ops="scrollPanel">
              <WeightRule
                ref="weightRule"
                v-if="activeName==='weightRule'"
                @tabsLabelChange="tabsLabelChange"
              />
            </vue-scroll>
          </div>
        </el-tab-pane>
        <el-tab-pane
          :disabled="mapState.channelsEnterType==='add'"
          :label="tabsLabel.weightCarryBitRule"
          name="weightCarryBitRule"
        >
          <div class="dialog-tabs-content">
            <vue-scroll :ops="scrollPanel">
              <WeightCarryBitRule
                v-if="activeName==='weightCarryBitRule'"
                ref="weightCarryBitRule"
              />
            </vue-scroll>
          </div>
        </el-tab-pane>
        <el-tab-pane
          :disabled="mapState.channelsEnterType==='add'"
          :label="tabsLabel.bagRule"
          name="bagRule"
        >
          <div class="dialog-tabs-content">
            <vue-scroll :ops="scrollPanel">
              <BagRule v-if="activeName==='bagRule'" ref="bagRule" />
            </vue-scroll>
          </div>
        </el-tab-pane>
        <el-tab-pane
          :disabled="mapState.channelsEnterType==='add'"
          :label="tabsLabel.commonAddresser"
          name="commonAddresser"
        >
          <div class="dialog-tabs-content">
            <vue-scroll :ops="scrollPanel">
              <CommonAddresser
                v-if="activeName==='commonAddresser'"
                @tabsLabelChange="tabsLabelChange"
                ref="commonAddresser"
              />
            </vue-scroll>
          </div>
        </el-tab-pane>
        <el-tab-pane
          :disabled="mapState.channelsEnterType==='add'"
          :label="tabsLabel.operateRouterSetting"
          name="operateRouterSetting"
        >
          <div class="dialog-tabs-content">
            <vue-scroll :ops="scrollPanel">
              <OperateRouterSetting
                v-if="activeName==='operateRouterSetting'"
                ref="operateRouterSetting"
              />
            </vue-scroll>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span
        slot="footer"
        v-if="mapState.cancelButtonState||mapState.submitButtonState"
        class="dialog-footer"
      >
        <el-button v-if="mapState.cancelButtonState" @click="cancel">{{$t('i18n_back')}}</el-button>
        <el-button
          v-loading="mapState.submitLoadingState"
          v-if="mapState.submitButtonState"
          type="primary"
          @click="submit"
        >{{$t('i18n_confirm')}}</el-button>
      </span>
    </IesDialog>
  </div>
</template>

<script>
import Base from './components/base'
import WeightRule from './components/weight-rule'
import WeightCarryBitRule from './components/weight-carry-bit-rule'
import BagRule from './components/bag-rule'
import CommonAddresser from './components/common-addresser'
import OperateRouterSetting from './components/operate-router-setting'
import { vueScrollSetting } from '@config/vue-scroll-setting'
import { mapActions } from 'vuex'
export default {
  components: {
    Base,
    WeightRule,
    WeightCarryBitRule,
    BagRule,
    CommonAddresser,
    OperateRouterSetting
  },
  data () {
    return {
      affirmShow: false,
      cancelShow: false,
      tableData: [],
      theadData: [
        {
          prop: 'selection',
          align: 'center'
        },
        {
          prop: 'index',
          label: 'i18n_idx',
          align: 'center'
        },
        {
          prop: 'serverChannelCode',
          label: 'i18n_servicer-i18n_channel-i18n_code',
          align: 'center'
        },
        {
          prop: 'serverChannelNameCn',
          label: 'i18n_chinese_name',
          align: 'center'
        },
        {
          prop: 'serverChannelNameEn',
          label: 'i18n_english_name',
          align: 'center'
        },
        {
          prop: 'customerNameCn',
          label: '服务商中文名',
          align: 'center'
        },
        {
          prop: 'customerNameEn',
          label: '服务商英文名',
          align: 'center'
        },
        {
          prop: 'customerCode',
          label: 'i18n_servicer-i18n_code',
          align: 'center'
        },
        {
          prop: 'apiName',
          label: 'API服务商',
          align: 'center'
        },
        {
          prop: 'apiCode',
          label: 'API服务商代码',
          align: 'center'
        },
        {
          prop: 'isActive',
          label: 'i18n_take_effect-i18n_status',
          type: 'code',
          options: {
            true: '已启用',
            false: '已禁用'
          },
          align: 'center'
        },

        {
          prop: 'remark',
          label: 'i18n_remark',
          align: 'center'
        },
        {
          prop: 'operation',
          label: 'i18n_operation',
          align: 'center',
          width: '200px',
          options: {
            edit: true,
            delete: true,
            change: true
          }
        }
      ],
      paginationOptions: {
        current: 1,
        count: 0,
        size: 10,
        total: 0,
        sizes: [10, 20, 30, 40]
      },
      page: {
        current: 1,
        size: 10
      },
      searchList: [// 查询组件条件
        {
          label: 'i18n_chinese_name',
          type: 'input',
          value: '',
          name: 'serverChannelNameCn',
          placeholder: 'i18n_chinese_name'
        },
        {
          label: 'i18n_english_name',
          type: 'input',
          value: '',
          name: 'serverChannelNameEn',
          placeholder: 'i18n_english_name'
        },
        {
          label: 'i18n_take_effect-i18n_status',
          type: 'select',
          value: null,
          name: 'isActive',
          placeholder: 'i18n_take_effect-i18n_status',
          selectOptions: [
            {
              label: 'i18n_all',
              value: ''
            },
            {
              label: '已启用',
              value: true
            },
            {
              label: '已禁用',
              value: false
            }
          ]
        }
      ],
      dialogVisible: false,
      innerVisible: false,
      iesTableLoading: false,
      tabsLabel: {
        base: this.$t('i18n_basic_information'),
        weightRule: this.$t('i18n_compute_weight') + this.$t('i18n_rule'),
        weightCarryBitRule: this.$t('i18n_weight_carry_bit') + this.$t('i18n_rule'),
        bagRule: this.$t('i18n_bag') + this.$t('i18n_rule'),
        commonAddresser: this.$t('i18n_common_addresser'),
        operateRouterSetting: this.$t('i18n_operation') + this.$t('i18n_router') + this.$t('i18n_setting')
      },
      activeName: 'base',
      scrollPanel: vueScrollSetting
    }
  },
  computed: {
    tabsLabelDefault () { // 默认tabs title
      return {
        base: this.$t('i18n_basic_information'),
        weightRule: this.$t('i18n_compute_weight') + this.$t('i18n_rule'),
        weightCarryBitRule: this.$t('i18n_weight_carry_bit') + this.$t('i18n_rule'),
        bagRule: this.$t('i18n_bag') + this.$t('i18n_rule'),
        commonAddresser: this.$t('i18n_common_addresser'),
        operateRouterSetting: this.$t('i18n_operation') + this.$t('i18n_router') + this.$t('i18n_setting')
      }
    },
    mapState () {
      return this.$store.state.servicesChannels
    },
    pageType () {
      return this.$store.state.servicesChannels.pageType
    }
  },
  watch: {
    dialogVisible (newValue, oldValue) {
      if (!newValue) {
        this.activeName = 'base'
      }
    }
  },
  created () {
    this.getList()
  },
  mounted () {
  },
  methods: {
    ...mapActions([
      'servicesChannels/setPageType',
      'servicesChannels/setSubmitBtnState',
      'servicesChannels/setCancelBtnState',
      'servicesChannels/setChannelsEnterType',
      'servicesChannels/setChannelsId'
    ]),
    searchAdd () { // 打开新增弹框
      this.activeName = 'base'
      this['servicesChannels/setChannelsEnterType']('add')// 渠道类型--新增
      this['servicesChannels/setChannelsId']('')// 渠道ID
      this.dialogVisible = true
    },
    searchSubmit (data) { // 执行查询
      this.page = Object.assign(this.page, data)
      this.getList()
    },
    tabsLabelChange (data) { // 切换tab标签title
      // this.tabsLabel[this.activeName] = data
      this.$set(this.tabsLabel, this.activeName, data)
    },
    tabChange (val) { // 切换标签页
      this.activeName = val.name
      Object.keys(this.tabsLabelDefault).forEach(key => { // 重置非当前页的title
        if (key !== val.name) {
          this.$set(this.tabsLabel, key, this.tabsLabelDefault[key])
          // this.tabsLabel[key] = this.tabsLabelDefault[key]
        }
      })
      if (val.name === 'weightRule') {
        if (this.mapState.pageType === 'list') { // 计重规则列表页时不显示保存取消按钮
          this['servicesChannels/setSubmitBtnState'](false)
        }
      } else {
        this['servicesChannels/setPageType']('list')
        this['servicesChannels/setSubmitBtnState'](true)
        this['servicesChannels/setCancelBtnState'](false)
      }
    },
    getList () {
      this.iesTableLoading = true
      this.$api.servicesChannels.page({
        data: this.page,
        method: 'post',
        loading: false
      }).then(res => {
        this.iesTableLoading = false
        this.tableData = res.data
        this.paginationOptions.current = res.current
        this.paginationOptions.count = res.pages
        this.paginationOptions.size = res.size
        this.paginationOptions.total = res.total
      }).catch(() => {
        this.iesTableLoading = false
      })
    },
    tableSelectionChange (val) { // 多选

    },
    tableSizeChange (val) { // 选页size
      this.page.current = 1
      this.page.size = val
      this.getList()
    },
    tableCurrentChange (val) { // 选页码
      this.page.current = val
      this.getList()
    },
    edit (item) {
      this['servicesChannels/setChannelsEnterType']('edit')// 渠道类型--编辑
      this['servicesChannels/setChannelsId'](item.id)// 渠道ID
      this.dialogVisible = true
    },
    del (item) {
      this.$confirm('此操作将永久删除 【' + item.serverChannelNameCn + '】服务商 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.servicesChannels.delete({
          data: {
            id: item.id,
            isDelete: true
          },
          method: 'PUT'
        }).then(res => {
          this.$notify({
            title: '成功',
            message: '服务商渠道删除成功！',
            type: 'success',
            duration: '3000'
          })
          this.getList()
        })
      })
    },
    change (item) {
      this.$api.servicesChannels.editActive({
        data: {
          id: item.id,
          isActive: item.isActive
        },
        method: 'PUT'
      }).then(res => {
        this.$notify({
          title: '成功',
          message: '服务商渠道状态更改成功！',
          type: 'success',
          duration: '3000'
        })
        this.getList()
      })
    },
    submit () { // 保存
      this.$nextTick(() => {
        if (!this.mapState.submitLoadingState) {
          this.$refs[this.activeName].submit()
        }
      })
    },
    cancel () { // 返回
      this.$nextTick(() => {
        if (this.activeName === 'weightRule') { //
          this.$refs[this.activeName].$refs.weightRuleAdd.back()
        }
        if (this.activeName === 'commonAddresser') { //
          this.$refs[this.activeName].$refs.CommonAddresserAdd.back()
        }
        if (this.activeName === 'weightCarryBitRule' || this.activeName === 'operateRouterSetting') { //
          this.$refs[this.activeName].back()
        }
      })
    }
  }
}
</script>

<style lang='scss' >
.services-channels {
  &.el-dialog {
    .el-tabs {
      height: 100%;
      .el-tabs__content {
        height: calc(100% - 70px);
        .el-tab-pane {
          height: 100%;
          .dialog-tabs-content {
            height: calc(100% - 30px);
            box-sizing: border-box;
            margin-top: 10px;
            &/deep/ .__vuescroll {
              &/deep/ .__view {
                min-height: calc(100% - 30px) !important;
              }
            }
          }
        }
      }
    }
    .serch-ground {
      margin-bottom: 20px;
    }
    .pagination {
      margin-top: 30px;
    }
    &.el-dialog {
      .el-dialog__body {
        padding-top: 0;
      }
    }

    .submit-ground {
      display: flex;
      justify-content: flex-end;
      padding-left: 30px;
      padding-right: 30px;
      margin-top: 20px;
      .submit-btn {
        width: 100px;
      }
    }
    .dialog-footer {
      .el-button {
        .el-loading-mask {
          background-color: rgba(255, 255, 255, 0.2);
        }
      }
    }
  }
}
.el-form {
  .options-ground {
    width: 50%;
    margin-right: 0;
  }
  .input-text {
    width: 217px;
  }
}
</style>


